<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="example">
        <h2>成绩表</h2>
        <label for="姓名：">姓名：</label><span>{{name}}</span>
        <label for="性别：">性别：</label><span>{{sex}}</span>
        <label for="年龄：">年龄：</label><span>{{ege}}</span>
        <div class="report">
            <div class="title">
                <div>学期</div>
                <div>数学</div>
                <div>物理</div>
                <div>化学</div>
                <div>英语</div>
                <div>计算机</div>
                <div>总分</div>
            </div>
            <div class="content" v-for="(scores, index) in scores">
                <div>{{scores.term}}</div>
                <div v-for="score in scores.score">
                    <div>{{score}}</div>
                </div>
                <div>{{totalscore(index)}}</div>
            </div>
        </div>
    </div>

    <script>
        var exam = new Vue({
            el: "#example",
            data : {
                name: "你大手",
                sex: "女",
                ege : "100",
                scores: [
                    {
                        term: "第一学期",
                        score : {
                            math : 59,
                            physics : 59,
                            chemistry : 59,
                            english : 59,
                            computer : 59
                        }
                    },{
                        term: "第二学期",
                        score : {
                            math : 59,
                            physics : 59,
                            chemistry : 59,
                            english : 59,
                            computer : 59
                       } 
                    }
                ]
            },
            methods:{
                totalscore : function(index){
                    var total = 0;//定义总分初值
                    var obj = this.scores[index].score;//获取分数对象
                    for (var i in obj) {
                        total+= obj[i]
                    }
                    return total;//返回总分
                }
            }
        })
    </script>

    <style>
        .report {
            width: 500px;
            background: rgba(231, 198, 198, 0.133);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .title{
            display: flex;
        }
        .title *{
            margin-left: 10px;
        }
        .content{
            display: flex;
        }
        .content *{
            margin-left: 10px;
        }


    </style>

    



</body>
</html>